<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-input v-model="searchForm.name" placeholder="名称" clearable>
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="getCarouseList">搜索</el-button>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="dialogVisible = true">新增</el-button>
      </el-form-item>
      <el-form-item>
        <!-- 气泡删除 -->
        <el-popconfirm title="这是确定批量删除吗？" @confirm="delHandle(null)">
          <el-button type="danger" slot="reference" :disabled="delBtlStatu"
          >批量删除
          </el-button
          >
        </el-popconfirm>
      </el-form-item>
    </el-form>

    <el-table
        border
        stripe
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>

      <el-table-column prop="title" label="标题" width="120">
      </el-table-column>

      <el-table-column label="轮播图" width="200">
        <template slot-scope="scope">
          <el-image
              style="width: 150px; height: 100px"
              :src="scope.row.imgPath"
              fit="cover"
          ></el-image>
        </template>
      </el-table-column>

      <el-table-column prop="des" label="描述" show-overflow-tooltip>
      </el-table-column>

      <el-table-column
          width="200"
          prop="createTime"
          label="创建时间"
          show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
          width="200"
          prop="updateTime"
          label="更新时间"
          show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column prop="carouselStatus" label="状态">
        <template slot-scope="scope">
          <el-tag size="small" v-if="scope.row.carouselStatus === 1" type="success"
          >展示
          </el-tag
          >
          <el-tag size="small" v-else-if="scope.row.carouselStatus === 0" type="danger"
          >禁用
          </el-tag
          >
        </template>
      </el-table-column>

      <el-table-column prop="icon" label="操作" width="300">
        <template slot-scope="scope">
          <el-button type="text" @click="editHandle(scope.row.pid)"
          >编辑
          </el-button
          >
          <el-divider direction="vertical"></el-divider>

          <!-- Popconfirm 气泡确认框  -->
          <template>
            <el-popconfirm
                title="这是一段内容确定删除吗？"
                @confirm="delHandle(scope.row.pid)"
            >
              <el-button type="text" slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[2, 5, 10, 100]"
          :current-page="current"
          :page-size="size"
          :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
        title="编辑"
        :visible.sync="dialogVisible"
        width="600px"
        :before-close="handleClose"
    >
      <!-- Form 表单 -->
      <el-form
          :model="editForm"
          :rules="editFormRules"
          ref="editForm"
          label-width="100px"
          class="demo-editForm"
      >
        <el-form-item label="标题" prop="username" label-width="100px">
          <el-input v-model="editForm.title" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="描述" prop="des" label-width="100px">
          <el-input v-model="editForm.des" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="关联景点" prop="des" label-width="100px">
          <el-input v-model="editForm.productPid" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort" label-width="100px">
          <el-input v-model="editForm.sort" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="状态" prop="carouselStatus" label-width="100px">
          <el-radio-group v-model="editForm.carouselStatus">
            <el-radio :label="0">禁用</el-radio>
            <el-radio :label="1">展示</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="轮播图" prop="imgPath" label-width="100px">
          <el-input v-model="editForm.imgPath" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('editForm')"
          >确定
          </el-button
          >
          <el-button @click="resetForm('editForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Carouse",
  data() {
    return {
      tableData: [],

      searchForm: {},
      delBtlStatu: true,

      total: 0,
      size: 5,
      current: 1,

      dialogVisible: false,
      editForm: {},

      editFormRules: {
        name: [{required: true, message: "请输入名称", trigger: "blur"}],
        code: [{required: true, message: "请输入唯一编码", trigger: "blur"}],
        statu: [{required: true, message: "请选择状态", trigger: "blur"}],
      },

      multipleSelection: [],

      roleDialogFormVisible: false,
      defaultProps: {
        children: "children",
        label: "name",
      },
      roleForm: {},
      roleTreeData: [],
      checkStrictly: true,
    };
  },

  created() {
    this.getCarouseList();
  },
  methods: {
    // 获取轮播图
    getCarouseList() {
      this.$axios
          .get("/cat/productCarouse/list", {
            params: {
              name: this.searchForm.name,
              limit: this.size,
              page: this.current,
            },
          })
          .then((res) => {
            this.tableData = res.data.page.list;
            this.size = res.data.page.pageSize;
            this.total = res.data.page.totalCount;
          });
    },

    // 勾选
    handleSelectionChange(val) {
      console.log("勾选");
      console.log(val);
      this.multipleSelection = val;

      this.delBtlStatu = val.length == 0;
    },

    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val;
      this.getCarouseList();
    },

    // 分页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.current = val;
      this.getCarouseList();
    },

    // 重置
    resetForm(formName) {
      this.$refs[formName];
      this.dialogVisible = false;
      this.editForm = {};
    },

    // 重置
    handleClose() {
      this.resetForm("editForm");
    },

    // 更新｜新增
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios
              .post(
                  "/cat/productCarouse/" + (this.editForm.pid ? "update" : "save"),
                  this.editForm
              )
              .then((res) => {
                console.log(res);
                this.$message({
                  showClose: true,
                  message: "操作成功",
                  type: "success",
                  onClose: () => {
                    this.getCarouseList()
                  },
                });

                this.dialogVisible = false;
                this.resetForm(formName);
              });
        } else {
          return false;
        }
      });
    },

    // 编辑
    editHandle(pid) {
      this.$axios.get("/cat/productCarouse/info/" + pid).then((res) => {
        this.editForm = res.data.productCarouseInfo;

        this.dialogVisible = true;
      });
    },

    //批量删除、单条删除
    delHandle(pid) {
      var pids = [];

      if (pid) {
        pids.push(pid);
      } else {
        this.multipleSelection.forEach((row) => {
          pids.push(row.pid);
        });
      }

      this.$axios.post("/cat/productCarouse/delete", pids).then((res) => {
        console.log(res);
        this.$message({
          showClose: true,
          message: "操作成功",
          type: "success",
          onClose: () => {
            this.getCarouseList();
          },
        });
      });
    },
  },
};
</script>

<!-- 分页插件向右 -->
<style scoped>
.el-pagination {
  float: right;
  margin-top: 22px;
}
</style>
